<template>
    <div class="role">
        <a-form
                layout="inline"
                @submit="handleSearch"
        >
            <a-form-item label="所属系统">
                <sys-select :sysCode.sync="queryForm.sysCode"></sys-select>
            </a-form-item>
            <a-form-item label="角色名称">
                <a-input placeholder="角色名称" v-model="queryForm.roleName"/>
            </a-form-item>
            <a-form-item label="角色编码">
                <a-input placeholder="角色编码" v-model="queryForm.roleCode"/>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" html-type="submit">
                    查询
                </a-button>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" @click="handleAdd()">
                    新增
                </a-button>
            </a-form-item>
        </a-form>
        <a-table :dataSource="data" :rowKey="record => record.roleId" :pagination=false>
            <a-table-column title="序号" :customRender="(text,record,index)=>(index+1)"/>
            <a-table-column title="角色编码" :scopedSlots="{ customRender: 'roleCode'}">
                <template slot-scope="record">
                    <div>
                        <a-input v-if="record.editable" style="margin: -5px 0" :value="record.roleCode"
                                 @change="e => handleChange(e.target.value, record.roleId,'roleCode')"/>
                        <template v-else>{{record.roleCode}}</template>
                    </div>
                </template>
            </a-table-column>
            <a-table-column title="角色名称" :scopedSlots="{ customRender: 'roleName'}">
                <template slot-scope="record">
                    <div>
                        <a-input v-if="record.editable" style="margin: -5px 0" :value="record.roleName"
                                 @change="e => handleChange(e.target.value, record.roleId, 'roleName')"/>
                        <template v-else>{{record.roleName}}</template>
                    </div>
                </template>
            </a-table-column>
            <a-table-column title="操作" key="action">
                <template slot-scope="text, record">
                    <span class="handle_btn">
                        <span v-if="record.editable">
                            <a @click="() => save(record.roleId)">保存</a>
                            <a-popconfirm title='确认取消?' @confirm="() => cancel(record.roleId)">
                            <a>取消</a>
                        </a-popconfirm>
                        </span>
                        <span v-if="!record.editable">
                            <a @click="() => edit(record.roleId)">编辑</a>
                        </span>
                        <a-popconfirm v-if="!record.editable" title="确认删除?" @confirm="() => onDelete(record.roleId)">
                            <a href="javascript:;">删除</a>
                        </a-popconfirm>
                    </span>
                </template>
            </a-table-column>
        </a-table>
        <common-page v-model="easyPage" @change="findEasyPage"/>
    </div>
</template>

<script>
  import SysSelect from '../../components/sys/SysSelect'
  import CommonPage from '../../components/common/CommonPage'
  export default {
    name: 'Role',
    components: {
      SysSelect,
      CommonPage,
    },
    data () {
      return {
        queryForm: {},
        easyPage: {
          current: 1,
          size: 10,
        },
        data: [],
        cacheData: []
      }
    },
    created () {
      this.findEasyPage()
    },
    methods: {
      // 获取列表数据
      findEasyPage () {
        let self = this
        Object.assign(self.queryForm, {
          current: self.easyPage.current,
          size: self.easyPage.size,
        })
        self.$axios.post('roleAction/findPage', self.queryForm).then(res => {
          self.easyPage = res.data
          self.data = res.data.records
          self.cacheData = res.data.records.map(item => ({ ...item }))
        })
      },
      // 查询列表
      handleSearch (e) {
        e.preventDefault()
        this.findEasyPage()
      },
      // 编辑
      edit (id) {
        let self = this
        const newData = [...self.data]
        const target = newData.filter(item => id === item.roleId)[0]
        if (target) {
          target.editable = true
          self.data = newData
        }
      },
      // 列表修改
      handleChange (value,id,col) {
        let self = this
        const newData = [...self.data]
        const target = newData.filter(item => id === item.roleId)[0]
        if (target) {
          target[col] = value
          this.data = newData
        }
      },
      // 保存编辑
      save (id) {
        let self = this
        const newData = [...self.data]
        const target = newData.filter(item => id === item.roleId)[0]
        target.roleId = id
        if (target) {
          delete target.editable
          self.$axios.post('roleAction/saveForm', target).then(res => {
            if (res.data.result) {
              self.data = newData
            } else {
              self.$message.error(res.data.msg)
            }
          })
        }
      },
      // 取消编辑
      cancel (id) {
        let self = this
        const newData = [...self.data]
        const target = newData.filter(item => id === item.roleId)[0]
        if (target) {
          if (id.indexOf('new')>-1) {
            this.data = newData.splice(0, newData.length - 1)
          } else {
            Object.assign(target, self.cacheData.filter(item => id === item.roleId)[0])
            delete target.editable
            this.data = newData
          }
        }
      },
      // 删除列表
      onDelete (id) {
        let self = this
        self.$axios.post('roleAction/deleteRole', {
          id: id,
        }).then(res => {
          if (res.data.result) {
            const newData = [...self.data]
            self.data = newData.filter(item => item.roleId !== id)
          } else {
            self.$message.error(res.data.msg)
          }
        })
      },
      // 新增
      handleAdd () {
        let self = this
        if (!self.queryForm.sysCode) {
          self.$message.error('请选择所属系统')
        } else {
          self.$axios.post('commonRest/getNewId').then(res => {
            const newData = {
              editable: true,
              roleId:'new'+ res.data
            }
            self.data = [...self.data, newData]
          })
        }
      },
    },
  }
</script>

<style lang="scss">
    .role {
        .editable-row-operations a {
            margin-right: 10px;
        }
    }
</style>